import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const Cell = ({ rowkey, colkey, value, onSelectedCell,selected,highlightAre,isFixed,wrongCell}) => {

    const isHighlighted=(rowkey,colkey)=>{
        const {row,col,block}=highlightAre;
        return(
            row.includes(rowkey)||
            col.includes(colkey)||
            block.some(([blockRow,blockCol])=>blockRow===rowkey&&blockCol===colkey)
        )
    }

    const isWrongRed = (rowkey, colkey) => {
        return wrongCell && wrongCell.some(cell => 
            cell.rowkey === rowkey && cell.colkey === colkey
        );
    }

    const renderNotes=(noteValue)=>{
        if(!noteValue||noteValue.length===0)return null;
        noteValue.sort((a, b) => a - b);
        const fullNotes=[1,2,3,4,5,6,7,8,9];
        const notesToRender = [];
        for (let i = 0; i < fullNotes.length; i++) {
            if (noteValue.includes(fullNotes[i])) {
                notesToRender.push(fullNotes[i]);
            } else {
                notesToRender.push(null);
            }
        }
        return (
            <View style={styles.noteContainer}>
                <View style={styles.noteRow}>
                    <Text style={[styles.noteText, notesToRender[0] === null ? { color: 'transparent' } : {}]}>
                        {notesToRender[0] || ''}
                    </Text>
                    <Text style={[styles.noteText, notesToRender[1] === null ? { color: 'transparent' } : {}]}>
                        {notesToRender[1] || ''}
                    </Text>
                    <Text style={[styles.noteText, notesToRender[2] === null ? { color: 'transparent' } : {}]}>
                        {notesToRender[2] || ''}
                    </Text>
                </View>
                <View style={styles.noteRow}>
                    <Text style={[styles.noteText, notesToRender[3] === null ? { color: 'transparent' } : {}]}>
                        {notesToRender[3] || ''}
                    </Text>
                    <Text style={[styles.noteText, notesToRender[4] === null ? { color: 'transparent' } : {}]}>
                        {notesToRender[4] || ''}
                    </Text>
                    <Text style={[styles.noteText, notesToRender[5] === null ? { color: 'transparent' } : {}]}>
                        {notesToRender[5] || ''}
                    </Text>
                </View>
                <View style={styles.noteRow}>
                    <Text style={[styles.noteText, notesToRender[6] === null ? { color: 'transparent' } : {}]}>
                        {notesToRender[6] || ''}
                    </Text>
                    <Text style={[styles.noteText, notesToRender[7] === null ? { color: 'transparent' } : {}]}>
                        {notesToRender[7] || ''}
                    </Text>
                    <Text style={[styles.noteText, notesToRender[8] === null ? { color: 'transparent' } : {}]}>
                        {notesToRender[8] || ''}
                    </Text>
                </View>
            </View>
        );
    }

    const textColor = value.isUserInput ? 'darkblue' : 'black';
    

    return (  
        <View style={[
            (rowkey % 3 === 0 && rowkey !== 0) ? { marginTop: 10 } : {},
            (colkey % 3 === 0 && colkey !== 0) ? { marginLeft: 10 } : {},
        ]}>
            <TouchableOpacity 
                style={[
                    styles.cell,
                    isHighlighted(rowkey, colkey) ? { backgroundColor: '#ADD8E6' } : {},
                    isWrongRed(rowkey, colkey) ? { backgroundColor: '#FFE4E1' } : {},
                ]}
                onPress={() =>!isFixed&&onSelectedCell(rowkey,colkey)} 
                disabled={isFixed}>
                <Text 
                    style={[
                        styles.text, 
                        { color: textColor },
                        value.isError ? { color: 'red' } : {},    
                    ]}>{value.value}</Text>
                {renderNotes(value.noteValue)}
                {selected && <View style={styles.circle} />}
            </TouchableOpacity>
        </View>
    );
};

const styles = StyleSheet.create({
    cell: {
        width: 35,
        height: 35,
        borderWidth: 1,
        borderColor: '#ccc',
        backgroundColor: '#f0f0f0',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
    },
    text: {
        fontSize: 20,
        fontWeight: 'bold',
        color: "black",
    },
    circle: {
        position: 'absolute',
        width: 25,
        height: 25,
        borderRadius: 12.5,
        backgroundColor: 'rgba(0, 0, 0, 0.1)',
        top: 5,
        left: 5,
    },
    noteContainer: {
        position: 'absolute',
        top: 0,
        left: 2,
        right: 2,
        bottom: 2,
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '100%',
        height: '100%',
    },
    noteRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
    },
    noteText: {
        fontSize: 8,
        color: 'gray',
        textAlign: 'center',
        width: '30%',
        lineHeight: 10,
    },
});

export default Cell;